
import { subjectApi } from "@/api";
import { Col, Form, Input, Modal, Row, Spin, message } from "antd";
import React, { useState, useEffect, useImperativeHandle, } from "react";
import { artApi,  } from "@/api";
import prestyles from "./preview.module.scss";
const PreviewModal = ({ onRef, getList = Function }) => {
    const [show, setShow] = useState(false);
    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm();
    const [html, setHtml] = useState(null);

    /**@description 表单布局 */
    const createFormItemLayout = (xsSpan, smSpan) => ({
        labelCol: {
            xs: { span: xsSpan },
            sm: { span: 4 },
        },
        wrapperCol: {
            xs: { span: xsSpan },
            sm: { span: smSpan },
        },
    });
    const formItemLayout = createFormItemLayout(24, 20);

    /**@description 取消 */
    const onCanle = () => {
        setShow(false);
    }

    /**@description 添加|修改操作 */
    const open = async ({ type = "add", record = Object }) => {
        const { id = undefined } = record;
        setShow(true);
        console.log("显示预览：",id)
        if (id) {
            try {
                setLoading(true);
                const data = await artApi.getDetail(id);
                const {  title, intro, subjectId, masterImage, description, status, sort } = data;
                console.log("拿到详情数据：",description)
                setHtml(description);
            } catch (error) {
                console.log("错误",error)
                message.error(error)
            } finally {
                setLoading(false);
            }
        }


    }

    /**@description 异步保存数据 */
    const saveDataToServer = async (object) => {

       
            getList();
            onCanle();
       

    }

    /**@description 校验表单 */
    const validateForm = async () => {
        form.validateFields().then(res => {
            saveDataToServer(res)
        })
    }

    /**@description 向外暴露方法 */
    useImperativeHandle(onRef, () => ({
        open
    }))

    /**@description form表单props配置 */
    const formProps = {
        form,
        initData: {
            type: undefined,
            parentId: "0",
            menuType: "1"
        }
    }

    useEffect(() => {
        !show && form.resetFields()
    }, [show])

    useEffect(() => {
        if (html) {
            document.getElementById("prehtml").innerHTML = html;
        }
    }, [html])


    return (
        <>
            <Modal
                title="编辑"
                width={1000}
                open={show}
                centered={true}
                // destroyOnClose={true}
                onCancel={onCanle}
                onOk={validateForm}
            >
                <Spin spinning={loading}>
                    <div id="prehtml" className={prestyles.preview}></div>
                </Spin>

            </Modal>
        </>
    )
}
export default PreviewModal;